<!--
 * @Author: malgee
 * @Date: 2025-04-27 15:23:25
 * @LastEditors: maling
 * @LastEditTime: 2025-04-28 08:47:52
 * @FilePath: /vue3-ts-cms/src/base-ui/table/src/table.vue
 * @Description:  
 * 
-->
<template>
  <div class="mg-table">
    <div class="header">
      <slot name="header">
        <div class="title">{{ title }}</div>
        <div class="handler">
          <slot name="headerHandler"></slot>
        </div>
      </slot>
    </div>
    <el-table
      :data="listData"
      border
      style="width: 100%"
      v-bind="childrenProps"
    >
      <el-table-column
        v-if="isShowSelectionColumn"
        type="selection"
        align="center"
        width="60"
      ></el-table-column> 
      <el-table-column
        v-if="isShowIndexColumn"
        type="index"
        label="序号"
        align="center"
        width="80"
      ></el-table-column>
      <template v-for="column in columns" :key="column.prop">
        <el-table-column
          v-bind="column"
          align="center"
          show-overflow-tooltip
        >
          <template #default="scope">
            <slot :row="scope.row" :name="column.slotName">
              {{ scope.row[column.prop] }}
            </slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="footer" v-if="isFooter">
      <slot name="footer">
        <el-pagination
          :page-size="page.size"
          :page-sizes="[10, 20, 30, 50, 100]"
          :current-page="page.current"
          :total="totalCount"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </slot>
    </div>
  </div>
</template>
<script setup lang="ts">
import { defineProps, defineEmits, watch } from "vue";
import { ElTableColumn } from "element-plus";

const props = defineProps({
  title: {
    type: String,
    default: () => ""
  },
  listData: {
    type: Array,
    required: true
  },
  columns: {
    // type: Array as () => Array<InstanceType<typeof ElTableColumn>>,
    type: Array as () => Array<any>,
    required: true
  },
  page: {
    type: Object,
    default: () => ({
      size: 10,
      current: 1
    })
  },
  isShowIndexColumn: {
    type: Boolean,
    default: () => false
  },
  isShowSelectionColumn: {
    type: Boolean,
    default: () => false
  },
  childrenProps: {
    type: Object,
    default: () => ({})
  },
  totalCount: {
    type: Number,
    default: () => 0
  },
  isFooter: {
    type: Boolean,
    default: () => true
  }
})
const emit = defineEmits(['update:page'])
const handleSizeChange = (val: number) => {
  emit('update:page', {
    size: val,
    current: props.page.current
  })
}
const handleCurrentChange = (val: number) => {
  emit('update:page', {
    size: props.page.size,
    current: val
  })
}

</script>
<style lang="less" scoped>
.header {
  display: flex;
  height: 45px;
  padding: 0 5px;
  justify-content: space-between;
  align-items: center;

  .title {
    font-size: 20px;
    font-weight: 700;
  }

  .handler {
    align-items: center;
  }
}

.footer {
  margin-top: 15px;

  .el-pagination {
    text-align: right;
  }
}
</style>